<template>
  <el-dialog :title="state.title" v-model="state.visible" @close="handleClose">

    <el-form :model="state.info" :rules="state.rules" ref="refForm" label-width="140px" class="good-form">
      <el-form-item label="店铺LOGO">
        <el-upload
          class="shop-uploader"
          :action="uploadServer"
          accept="jpg,jpeg,png"
          :headers="{
            Authorization: local.get('ADMIN.TOKEN') || ''
          }"
          :show-file-list="false"
          :before-upload="handleBeforeUpload"
          :on-success="uploadLogo"
          :preview-src-list="[state.info.shoplogo]">
          <img class="shop-image-preview"
            v-if="state.info.shoplogo"
            :src="state.info.shoplogo"
            :alt="state.info.shopname">
          <el-icon v-else class="avatar-uploader-icon">
            <Plus/>
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="店铺名称">
        <el-input v-model="state.info.shopname" maxlength="32" show-word-limit/>
      </el-form-item>
      <el-form-item label="所在位置">
        <el-input v-model="state.info.address" maxlength="99" show-word-limit/>
      </el-form-item>
      <el-form-item label="联系人">
        <el-input v-model="state.info.linker" maxlength="32" show-word-limit/>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="state.info.phone" maxlength="11" show-word-limit/>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="state.info.tel" maxlength="16" show-word-limit/>
      </el-form-item>
      <el-form-item label="营业时间" prop="business_hours">
        <el-time-select
          v-model="state.busTime[0]"
          :max-time="state.busTime[1]"
          class="mr-4 bus-time"
          placeholder="开始时间"
          start="06:00"
          step="00:30"
          end="24:00"
        />
        <span style="padding: 0 15px"> - </span>
        <el-time-select
          v-model="state.busTime[1]"
          :min-time="state.busTime[0]"
          class="mr-4 bus-time"
          placeholder="结束时间"
          start="06:00"
          step="00:30"
          end="24:00"
        />
      </el-form-item>
      <el-form-item label="营业执照">
        <el-upload
          class="shop-uploader"
          :action="uploadServer"
          accept="jpg,jpeg,png"
          :headers="{
            Authorization: local.get('ADMIN.TOKEN') || ''
          }"
          :show-file-list="false"
          :before-upload="handleBeforeUpload"
          :on-success="uploadLicense"
        >
          <img class="shop-image-preview"
            v-if="state.info.business_license"
            :src="state.info.business_license">
          <el-icon v-else class="avatar-uploader-icon">
            <Plus/>
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="安全证书">
        <el-upload
          class="shop-uploader"
          :action="uploadServer"
          accept="jpg,jpeg,png"
          :headers="{
            Authorization: local.get('ADMIN.TOKEN') || ''
          }"
          :show-file-list="false"
          :before-upload="handleBeforeUpload"
          :on-success="uploadCertificate"
        >
          <img class="shop-image-preview" v-if="state.info.certificate"
            :src="state.info.certificate">
          <el-icon v-else class="avatar-uploader-icon">
            <Plus/>
          </el-icon>
        </el-upload>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="state.visible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { Plus } from '@element-plus/icons'
import { reactive, ref } from "vue";
import { local } from "../utils/storage";
import { ElMessage } from "element-plus";
import { uploadServer } from "../utils";
import { AdminShopInfo, AdminShopPost } from '../api/server/shop'
import crud from '../utils/crud'

const props = defineProps({
  reload: Function,
})

/**
 * 1.上传图片
 */
const handleBeforeUpload = (file) => {
  const sufix = file.name.split('.')[1] || ''
  if (!['jpg', 'jpeg', 'png'].includes(sufix)) {
    ElMessage.error('请上传 jpg、jpeg、png 格式的图片')
    return false
  }
}

const uploadLogo = (e) => state.info.shoplogo = e.data.path || ''
const uploadLicense = (e, file) => state.info.business_license = e.data.path || ''
const uploadCertificate = (e, file) => state.info.certificate = e.data.path || ''

const refForm = ref(null)
const handleClose = () => refForm.value.resetFields()

const state = reactive({
  visible: false,
  id: '',
  title: '添加',
  busTime: [],
  info: {
    shopname: '',
    shoplogo: '',
    address: '',
    longitude: '',
    latitude: '',
    linker: '',
    tel: '',
    phone: '',
    business_hours: [],
    business_license: '',
    certificate: [],
  },
  rules: [],
})
// '12:00:00', '08:00:00'
const defaultTime2 = [
  new Date(2020, 1, 1, 6, 0, 0),
  new Date(2020, 2, 1, 22, 0, 0),
]

const open = async (id) => {
  state.title = id ? '编辑' : '添加'
  state.visible = true
  if (id) {
    state.info = JSON.parse(JSON.stringify(state.info))
    const { data } = await AdminShopInfo(id)
    if (data.business_hours) {
      state.busTime = data.business_hours.split(',')
    }
    state.info = data
  }
}

const submit = () => {
  let info = JSON.parse(JSON.stringify(state.info))
  info.business_hours = state.busTime.toString()
  crud.update(AdminShopPost, info, async () => {
    state.visible = false
    await props.reload()
  })
}

defineExpose({ open })
</script>

<style scoped>
.shop-uploader {
  color: #ddd;
  font-size: 30px;
}

img.shop-image-preview {
  width: 160px;
  height: 100px;
  border-radius: 5px;
  object-fit: cover;
  cursor: pointer;
}

.bus-time :deep(.el-input__inner) {
  width: 130px !important;
}

:deep(.el-dialog__footer) {
  background-color: #e4e7ed;
}

:deep(.shop-uploader .el-upload) {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

:deep(.el-icon.avatar-uploader-icon ) {
  font-size: 28px;
  color: #8c939d;
  width: 160px;
  height: 100px;
  text-align: center;
}
</style>
